<template>
  <div class="">
    <div class="text-animation">动画效果</div>
    <div class="d-border-content">
      <div class="bb">
        这是一个边框效果
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.text-animation {
  font-family: 华文行楷;
  font-weight: bolder;
  max-width: 15rem;
  color: #8c888b;
  background: -webkit-linear-gradient(
    45deg,
    #70f7fe,
    #fbd7c6,
    #fdefac,
    #bfb5dd,
    #bed5f5
  );
  color: transparent;
  -webkit-background-clip: text;
  animation: run 20s linear infinite;
}
@keyframes run {
    0% {
        backgroud-position: 0 0
    }

    to {
        background-position: 2000px 0
    }
}

/*定义两个伪类元素的位置*/
.d-border-content {
  width: 300px;
  height: 300px;
  position: relative;
}
.bb,
.bb::before,
.bb::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/*定义容器bb的样式及边框的样式*/
.bb {
  width: 200px;
  height: 200px;
  margin: auto;
  background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  color: #69ca62;
  box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  text-align: center;
  line-height: 200px;
}
/*定义两个伪类的样式及动画开始*/
.bb::before,
.bb::after {
  content: "";
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  clip: rect(0px, 220px, 2px, 0px);
  animation: clipMe 8s linear infinite;
}
/*前一个伪类的动画提前4s执行*/
.bb::before {
  animation-delay: -4s;
}
.bb:hover::after,
.bb:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}
/*定义帧动画*/
@keyframes clipMe {
  0%,
  100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  }
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}
</style>